<template>
    <div class="price-wrapper">
        <el-radio v-model="currency" :label="1">人民币</el-radio>
        <el-radio v-model="currency" :label="2">美元</el-radio>
        <img class="price-empty" src="@/assets/images/price.png" alt="" v-if="priceList.length == 0"/>
        <ul class="price_list" v-else>
                <li class="price-item" v-for="(item,index) in priceList" :key="index">
                <div class="price-header">
                    <p>{{ item.name }}</p>
                    <p>
                        <i class="el-icon-edit-outline edit-icon" @click="getEdit(item.id)"></i>
                        <i class="el-icon-delete del-icon" @click="getDelete(item.id)"></i>
                    </p>
                </div>
                    <div class="price-table">
                        <table>
                            <tr>
                                <th>单价</th>
                                <th colspan="5" class="price-range" v-for="(val,key) in priceList[index].ladderPriceAmountConfigData" :key="key">
                                  <span v-if="key!=0 && key != priceList[index].ladderPriceAmountConfigData.length-1">{{ val.minPrice}} ＜</span>单价
                                   <span v-if="key != priceList[index].ladderPriceAmountConfigData.length-1">≤</span> {{ val.maxPrice}}
                                   <span v-if="key == priceList[index].ladderPriceAmountConfigData.length-1">﹥{{ val.minPrice}}</span>
                                </th>
                                <th colspan="5" class="price-range"  v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 2">-</th>
                                <th colspan="5" class="price-range"  v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 3">-</th> 
                                <th colspan="5" class="price-range"  v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 4">-</th> 
                            </tr>
                            <tr >
                                <th>起订量</th>
                                <!-- 1 -->
                                <td  v-for="(obj,j) in priceList[index].ladderPriceAmountConfigData[0].ladderPriceConfig" :key="j">
                                    {{ obj.mq }}
                                   
                                </td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[0].ladderPriceConfig.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[0].ladderPriceConfig.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[0].ladderPriceConfig.length-1 < 4">-</td>
                                <!-- 2 -->
                                <td  v-for="(obj,i) in priceList[index].ladderPriceAmountConfigData[1].ladderPriceConfig" :key="'id'+i">
                                    {{ obj.mq }}
                                </td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[1].ladderPriceConfig.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[1].ladderPriceConfig.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[1].ladderPriceConfig.length-1 < 4">-</td>
                                <!-- 3 -->
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 2">-</td>
                                <td v-else
                                     v-for="(obj,i) in priceList[index].ladderPriceAmountConfigData[2].ladderPriceConfig " :key="'2'+i">
                                   
                                     {{ obj.mq }}
                                </td>
                                <td  v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 2 && priceList[index].ladderPriceAmountConfigData[2].ladderPriceConfig.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 2 && priceList[index].ladderPriceAmountConfigData[2].ladderPriceConfig.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 2 && priceList[index].ladderPriceAmountConfigData[2].ladderPriceConfig.length-1 < 4">-</td>
                                <!-- 4 -->
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 3">-</td>
                                <td v-else
                                     v-for="(obj,i) in priceList[index].ladderPriceAmountConfigData[3].ladderPriceConfig " :key="'3'+i">
                                   
                                     {{ obj.mq }}
                                </td>
                                <td  v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 3 && priceList[index].ladderPriceAmountConfigData[3].ladderPriceConfig.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 3 && priceList[index].ladderPriceAmountConfigData[3].ladderPriceConfig.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 3 && priceList[index].ladderPriceAmountConfigData[3].ladderPriceConfig.length-1 < 4">-</td>
                                <!-- 5 -->
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 4">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 4">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 4">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 4">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 4">-</td>
                                <td v-else
                                     v-for="(obj,i) in priceList[index].ladderPriceAmountConfigData[4].ladderPriceConfig " :key="'4'+i">
                                   
                                     {{ obj.mq }}
                                </td>
                                <td  v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 4 && priceList[index].ladderPriceAmountConfigData[4].ladderPriceConfig.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 4 && priceList[index].ladderPriceAmountConfigData[4].ladderPriceConfig.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 4 && priceList[index].ladderPriceAmountConfigData[4].ladderPriceConfig.length-1 < 4">-</td>
                            </tr>
                            <tr>
                                <th>降比（%）</th>
                                <!-- 1 -->
                                <td  v-for="(obj,j) in priceList[index].ladderPriceAmountConfigData[0].ladderPriceConfig" :key="'5'+j">
                                    {{ obj.lower }}
                                   
                                </td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[0].ladderPriceConfig.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[0].ladderPriceConfig.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[0].ladderPriceConfig.length-1 < 4">-</td>
                                <!-- 2 -->
                                <td  v-for="(obj,i) in priceList[index].ladderPriceAmountConfigData[1].ladderPriceConfig" :key="'6'+i">
                                    {{ obj.lower }}
                                </td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[1].ladderPriceConfig.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[1].ladderPriceConfig.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData[1].ladderPriceConfig.length-1 < 4">-</td>
                                <!-- 3 -->
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 2">-</td>
                                <td v-else
                                     v-for="(obj,i) in priceList[index].ladderPriceAmountConfigData[2].ladderPriceConfig " :key="'7'+i">
                                   
                                     {{ obj.lower }}
                                </td>
                                <td  v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 2 && priceList[index].ladderPriceAmountConfigData[2].ladderPriceConfig.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 2 && priceList[index].ladderPriceAmountConfigData[2].ladderPriceConfig.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 2 && priceList[index].ladderPriceAmountConfigData[2].ladderPriceConfig.length-1 < 4">-</td>
                                <!-- 4 -->
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 3">-</td>
                                <td v-else
                                     v-for="(obj,i) in priceList[index].ladderPriceAmountConfigData[3].ladderPriceConfig " :key="'8'+i">
                                   
                                     {{ obj.lower }}
                                </td>
                                <td  v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 3 && priceList[index].ladderPriceAmountConfigData[3].ladderPriceConfig.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 3 && priceList[index].ladderPriceAmountConfigData[3].ladderPriceConfig.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 3 && priceList[index].ladderPriceAmountConfigData[3].ladderPriceConfig.length-1 < 4">-</td>
                                <!-- 5 -->
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 4">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 4">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 4">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 4">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 < 4">-</td>
                                <td v-else
                                     v-for="(obj,i) in priceList[index].ladderPriceAmountConfigData[4].ladderPriceConfig " :key="'9'+i">
                                   
                                     {{ obj.lower }}
                                </td>
                                <td  v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 4 && priceList[index].ladderPriceAmountConfigData[4].ladderPriceConfig.length-1 < 2">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 4 && priceList[index].ladderPriceAmountConfigData[4].ladderPriceConfig.length-1 < 3">-</td>
                                <td v-if="priceList[index].ladderPriceAmountConfigData.length-1 >= 4 && priceList[index].ladderPriceAmountConfigData[4].ladderPriceConfig.length-1 < 4">-</td>
                            </tr>
                        </table>
                    </div>
                </li>
        </ul>
    </div>
</template>
<script>
import {priceStepList} from '@/api/stock'
export default{
    props:['typeEvent'],
    data(){
        return{
            currency:1,
            priceList:[],

        }
    },
    created(){
        this.stepPriceList(this.currency);
    },
    methods:{
        stepPriceList(val){
            priceStepList(val).then(res=>{
                if(res.success){
                    this.priceList = res.result.data;
                    console.log(this.priceList,'ressssss');
                }else{
                    this.$message.error(res.message);
                }
               
            })
        },
        getEdit(id){
            this.$emit('editData',id)
            console.log(id,'44444444444');
        },
        getDelete(id){
            
            this.$emit('deleteData',id,2);
        },
    },
    watch:{
        typeEvent:{
            handler(val,old){
                console.log(val,'eeeeeee');
                if(val){
                    this.stepPriceList(this.currency);
                }
            },
            immediate:true,
            deep:true,
        },
        currency:{
            handler(val,old){
                // console.log(val,'eeeeeeeee');
                this.stepPriceList(val);
            },
            immediate:true,
            deep:true,
        }
    }

}
</script>
<style lang="scss" scoped>
    .price-wrapper{
        width: 100%;
        .price-empty{
            height: 385px;
            display: block;
            margin: 30px auto 0;
        }
    }
    .price_list{
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        margin: 20px 0 0;
        p{
            margin: 0;
        }
        .price-item{
            width:100%;
            background: #FFFFFF;
            border-radius: 2px;
            border: 1px solid #EEEEEE;
            padding: 12px 20px  14px 10px;
            margin-bottom: 20px;
    
            .edit-icon{
                color: #008FFF;
                font-size: 14px;
                margin-right: 10px;
            }
            .del-icon{
                font-size: 14px;
                text-align: center;
                color: #E02020;
            }
            .price-header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                font-weight: 600;
                color: #333333;
                line-height: 20px;
                margin-bottom: 20px;
            }
            .price-table{
                width: 100%;
                border: 1px solid #EEEEEE;
                table{
                    width: 100%;
                    tr{
                        th{
                            font-size: 12px;
                            color: #000000;
                            font-weight: 400 !important;
                            padding: 4px 0 6px 5px;
                            line-height: 17px;
                            &:first-child{
                                width: 4.6%;
                                background: #EEEEEE;
                            }
                        }
                        .price-range{
                            text-align: center;
                            border-right:1px solid #EEEEEE ;
                            &:last-child{
                                border-right:none ;
                            }
                        }
                        td{
                            width: 3.6%;
                            padding: 4px 0px 6px 13px;
                            font-size: 12px;
                            font-weight: 400;
                            color: #000000;
                            line-height: 17px;
                            border-right:1px solid #EEEEEE ;
                            &:last-child{
                                border-right:none ;
                            }
                        }
                       &:nth-child(2){
                        border-top:1px solid #EEEEEE;
                        border-bottom:1px solid #EEEEEE;
                       }
                    }
                }
            }
          
        }
    }
</style>